import React, { Component } from 'react';
import { StyleSheet, View, Image, Text, AppState, AsyncStorage, ScrollView } from 'react-native';
import { connect } from 'react-redux';
import PropTypes from 'prop-types';
import { SafeAreaView } from 'react-navigation';
import Items from '../components/items';
import BaseStyle from '../constants/Style';

import { List } from 'antd-mobile-rn';
const Item = List.Item;
const Brief = Item.Brief;


let d;
class Home extends Component {
  static propTypes = {
    navigation: PropTypes.object,
  };

  constructor(props) {
    super(props);
    this.state = {
      modalVisible: false,
    };
    const {
      navigation: { navigate, state, setParams },
    } = this.props;
    global.nav = {
      state: state,
      setParams: setParams,
      router: [],
    };
    global.nav.push = (routerName, params, action) => {
      //暴露给全局
      navigate(routerName, params, action);
    };
    global.nav.goBack = () => {
      this.props.navigation.goBack(null)
    }
  }

  componentDidMount = () => {

    AsyncStorage.multiGet(['token', 'userId'], (error, data) => {
      if (data[0][1] && data[1][1]) {
        //登录状态下
        global.token = data[0][1];
        global.userId = data[1][1];
        this.setState({ loginStatus: true });
      }
    });
    AppState.addEventListener('change', this._handleAppStateChange.bind(this));
  };

  componentWillUnMount = () => {
    AppState.removeEventListener('change', this._handleAppStateChange);
  };

  _handleAppStateChange(nextAppState) {
    // const { dispatch } = this.props;
    d = new Date();
    if (nextAppState === 'background') {
      //处于后台 记录下当前时间
      AsyncStorage.setItem('gestureBeginTime', d.getTime() + '');
    }
    if (nextAppState === 'inactive') {
      //切换中
    }
    if (nextAppState === 'active') {
      //处于前台
      AsyncStorage.multiGet(['token', 'userId'], (error, data) => {
        if (data[0][1] && data[1][1]) {
          //登录状态下
          AsyncStorage.getItem('gestureBeginTime', (error, time) => {
            if (time) {
              if (d.getTime() - parseFloat(time) > 1000 * 120) {
                //2分钟后 再次打开app刷新
              }
            }
          });
        }
      });
    }
  }

  render = () => {
    const {
      navigation: { navigate },
    } = this.props;

    return (
      <SafeAreaView
        style={[BaseStyle.flex, styles.homebg]}
        forceInset={{ top: 'never' }}>
        <View style={styles.container}>
          <View style={styles.titleView}>
            <Text>ANT UI</Text>
          </View>
          {/* list */}
          <ScrollView
            style={{ flex: 1, backgroundColor: '#f5f5f9' }}
            automaticallyAdjustContentInsets={false}
            showsHorizontalScrollIndicator={false}
            showsVerticalScrollIndicator={false}
          >

            <List renderHeader={() => '常用组件'}>
              <Item
                onClick={() => { navigate('ButtonScreen') }}
                thumb="https://os.alipayobjects.com/rmsportal/mOoPurdIfmcuqtr.png"
                arrow="horizontal"

              >
                Button
          </Item>

              <Item
                onClick={() => { navigate('CheckBoxScreen') }}
                thumb="https://os.alipayobjects.com/rmsportal/mOoPurdIfmcuqtr.png"
                arrow="horizontal"

              >
                Checkbox
          </Item>

              <Item
                onClick={() => { navigate('DatePickScreen') }}
                thumb="https://os.alipayobjects.com/rmsportal/mOoPurdIfmcuqtr.png"
                arrow="horizontal"

              >
                DatePickerView
          </Item>

              <Item
                onClick={() => { navigate('DatePickerScreen') }}
                thumb="https://os.alipayobjects.com/rmsportal/mOoPurdIfmcuqtr.png"
                arrow="horizontal"

              >
                DatePicker
          </Item>

              <Item
                onClick={() => { navigate('PickerViewScreen') }}
                thumb="https://os.alipayobjects.com/rmsportal/mOoPurdIfmcuqtr.png"
                arrow="horizontal"

              >
                PickerView
          </Item>
              <Item
                onClick={() => { navigate('ModealAntScreen') }}
                thumb="https://os.alipayobjects.com/rmsportal/mOoPurdIfmcuqtr.png"
                arrow="horizontal"

              >
                Modal
          </Item>
          <Item
                onClick={() => { navigate('TabsAntScreen') }}
                thumb="https://os.alipayobjects.com/rmsportal/mOoPurdIfmcuqtr.png"
                arrow="horizontal"

              >
                Tabs
          </Item>
          <Item
                onClick={() => { navigate('CarouselAntScreen') }}
                thumb="https://os.alipayobjects.com/rmsportal/mOoPurdIfmcuqtr.png"
                arrow="horizontal"

              >
                轮播
          </Item>
            </List>
          </ScrollView>



        </View>
      </SafeAreaView>
    );
  };
}

const styles = StyleSheet.create({
  homebg: {
    backgroundColor: '#eee',
  },
  container: {
    ...BaseStyle.flex,
    paddingTop: 40,
  },
  titleView: {
    ...BaseStyle.row,
    ...BaseStyle.row,
    ...BaseStyle.justifyContentCenter,
    marginBottom: 15,
  },
  scrolView: {
    width: 80,
    height: 80,
    backgroundColor: "red",
    marginLeft: 20,
  },
});

const mapStateToProps = state => {
  const { AdStore } = state;
  return {
    AdStore,
  };
};

export default connect(mapStateToProps)(Home);
